<template>
	<view class="TripDetails" :class="{'no-scroll': isPopupOpen}">
		<!-- 		<customHeaderFixedBarVue :backgroundColor="customHeaderFixedBarVue"></customHeaderFixedBarVue> -->
		<customBJImageVue :Img="Image" :TripInfoData="arrangement_info"></customBJImageVue>
		<customTextInfoVue :TripInfoData="CustomizedDetailInfo" @openPopup="handlePopupOpen"
			@closePopup="handlePopupClose"></customTextInfoVue>
		<customItineraryCardVue :Arrangement_info='arrangement_info' :TripData="CustomizedDetailInfo">
		</customItineraryCardVue>
		<customShareFooterVue @custompay="handleCustomPay " @openSucceedPopup="handlePopupOpen"
			@closeSucceedPopup="handlePopupClose" :TripData="CustomizedDetailInfo" @submitRefund="SubmitRefund">
		</customShareFooterVue>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue'
	import customHeaderFixedBarVue from './components/customHeaderFixedBar.vue';
	import customBJImageVue from './components/customBJImage.vue';
	import customTextInfoVue from './components/customTextInfo.vue';
	import customItineraryCardVue from './components/customItineraryCard.vue';
	import customShareFooterVue from './components/customShareFooter.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		GetCustomizedDetail,
		customizedPay,
		customRefund
	} from '../../config/API/Customize.js'
	// 页面头部颜色
	const headerBackgroundColor = ref('transparent');
	//页面滚动
	const isPopupOpen = ref(false);
	//订单数据极限存放
	const CustomizedDetailInfo = ref({})
	//回显的景点的数据
	const arrangement_info = ref([])
	//openid等等数据
	const userInfo = ref({})
	const customized_id = ref(0)
	//头部背景图片
	const Image = ref('/applet/static/1735275352.png')
	const getInfo = async (id) => {
		try {
			const res = await GetCustomizedDetail(id)
			if (res.code == 200) {
				//将回显数据赋值
				CustomizedDetailInfo.value = res.data
				arrangement_info.value = CustomizedDetailInfo.value.arrangement_info
				console.log('CustomizedDetailInfo', CustomizedDetailInfo.value);
			} else {
				uni.showToast({
					title: '系统异常',
					icon: "error"
				})
				CustomizedDetailInfo.value = {}
			}
			console.log('回显数据', res);
		} catch (e) {
			//TODO handle the exception
			uni.showToast({
				title: '网络异常',
				icon: "error"
			})
		}

	}
	const getopenid = () => {
		userInfo.value = uni.getStorageSync('userInfo')
	}
	//挂载获得数据
	onLoad(async (e) => {
		customized_id.value = e.customized_id
		await nextTick()
		getInfo(e.customized_id)
		getopenid()
	})

	const onPageScroll = (e) => {
		// console.log(e);
		const scrollThreshold = 100;
		if (e.scrollTop > scrollThreshold) {
			headerBackgroundColor.value = 'white';
		} else {
			headerBackgroundColor.value = 'transparent';
		}
	};
	// 在uni-app中注册页面滚动事件
	if (typeof getCurrentPages === 'function') {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		currentPage.onPageScroll = onPageScroll;
	}
	const handlePopupOpen = () => {
		isPopupOpen.value = true; // 禁止页面滚动
	};

	const handlePopupClose = () => {
		isPopupOpen.value = false; // 恢复页面滚动
	};

	// 显示加载提示
	const showLoading = (message = '正在支付') => {
		uni.showLoading({
			title: message,
			mask: true
		});
	};

	// 隐藏加载提示
	const hideLoading = () => {
		uni.hideLoading();
	};

	// 成功提示
	const showToastSuccess = (message) => {
		uni.showToast({
			title: message,
			icon: 'success'
		});
	};

	// 失败提示
	const showToastError = (message) => {
		uni.showToast({
			title: message,
			icon: 'none'
		});
	};

	// wx支付
	const wxPay = async (payData) => {
		console.log('payData0', payData);

		try {
			await new Promise((resolve, reject) => {
				uni.requestPayment({
					provider: "wxpay",
					...payData,
					success: async (res) => {
						console.log(res);
						showToastSuccess('支付成功');
						resolve(true);
					},
					fail: async (err) => {
						console.error('支付失败:', err);
						showToastError('支付失败，请重试');
						resolve(false);
					}
				});
			});

			// 无论支付成功或失败，都获取信息
			await getInfo(customized_id.value);
		} catch (err) {
			console.error('支付过程中发生错误:', err);
		}
	};

	// 订单支付
	const handleCustomPay = async () => {
		console.log('确认支付', CustomizedDetailInfo.value.customized_id, userInfo.value.openID);

		const payForm = {
			openid: userInfo.value.openID,
			order_id: CustomizedDetailInfo.value.customized_id
		};

		try {
			showLoading();
			const resPost = await customizedPay(payForm);
			console.log('resPost', resPost);

			if (resPost.code === 200) {
				await wxPay(resPost.data);
			} else {
				showToastError('订单异常请稍后再试');
			}
		} catch (e) {
			console.error('服务器异常:', e);
			showToastError('服务器异常');
		} finally {
			// 确保在所有情况下都隐藏加载提示
			hideLoading();
		}
	};
	//退款动作
	const SubmitRefund = async (RefundForm) => {

		const itForm = {
			...RefundForm,
			user_id: userInfo.value.id
		}
		uni.showLoading({
			title: '申请退款中',
			mask: 'true'
		})
		console.log('爷组件退款', itForm);
		try {
			const refuseRes = await customRefund(itForm)
			console.log('refuseRes', refuseRes);
			if (refuseRes.code == 200) {
				uni.showToast({
					title: '申请退款成功',
					icon: 'success'
				});
				uni.hideLoading()
				getInfo(customized_id.value)
			} else {
				uni.showToast({
					title: '订单异常请稍后再试',
					icon: 'error'
				});
				uni.hideLoading()
				getInfo(customized_id.value)
			}
		} catch (e) {
			//TODO handle the exception
			uni.showToast({
				title: '服务器异常',
				icon: 'error'
			})
			uni.hideLoading()
		}
		getInfo(customized_id.value)
	}
</script>


<style>
	.TripDetails {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 150rpx;
		box-sizing: border-box;
	}

	.no-scroll {
		overflow: hidden;
		position: fixed;
	}
</style>